import * as THREE from 'three';
import * as dat from 'dat.gui';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import './index.css'

const gui = new dat.GUI();

const geometry = new THREE.SphereGeometry(0.5, 36, 12);

const envMapTexture = new THREE.CubeTextureLoader()
  .setPath('../assets/textures/environmentMaps/0/')
  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])

const material = new THREE.MeshStandardMaterial();
material.metalness = 0.7
material.roughness = 0.3
material.envMap = envMapTexture;

gui.add(material,'metalness').min(0).max(1).step(0.001)
gui.add(material,'roughness').min(0).max(1).step(0.001)


const mesh = new THREE.Mesh(geometry, material);

const size = {
    width: window.innerWidth,
    height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 100);
camera.position.z = 3


const ambientLight = new THREE.AmbientLight('#ffffff',0.5)
const pointLight = new THREE.PointLight('#ffffff',0.5)
pointLight.position.set(2,3,4)

const scene = new THREE.Scene();
scene.add(mesh)
scene.add(ambientLight)
scene.add(pointLight)

const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({
    canvas
});
renderer.setSize(size.width,size.height)


const controls = new OrbitControls(camera,canvas)
controls.enableDamping = true  


function tick(){
    controls.update()
    renderer.render(scene,camera)
    requestAnimationFrame(tick)
}

tick()